<template>
    <div class="submit-button-group">
        <el-button type="primary" class="main-submit-btn" :loading="loading" @click="handleSubmit">
            <el-icon v-if="loading" class="loading-icon">
                <Loading />
            </el-icon>
            <span>{{ loading ? '提交中...' : '确认提交' }}</span>
        </el-button>

        <el-button class="reset-btn" @click="handleReset">
            重置
        </el-button>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import { Loading } from '@element-plus/icons-vue';

// 接收父组件传递的加载状态
const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    }
});

// 定义事件
const emit = defineEmits(['submit', 'reset']);

// 处理提交
const handleSubmit = () => {
    emit('submit');
};

// 处理重置
const handleReset = () => {
    emit('reset');
};
</script>

<style scoped>
.submit-button-group {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    justify-content: center;
}

.main-submit-btn {
    background-color: var(--bg-color-button);
    border-color: var(--bg-color-button);
    color: white;
    padding: 8px 30px;
    font-size: 14px;
}

.main-submit-btn:hover,
.main-submit-btn:focus {
    background-color: var(--bg-color-button-hover);
    border-color: var(--bg-color-button-hover);
    color: white;
}

.reset-btn {
    background-color: transparent;
    border-color: var(--border-color-input);
    color: var(--text-color-common);
    padding: 8px 30px;
    font-size: 14px;
}

.reset-btn:hover {
    background-color: var(--bg-color-button-hover);
    border-color: var(--border-color-hover);
}

.loading-icon {
    margin-right: 5px;
    font-size: 14px;
}
</style>